<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>D3 DEMO</title>
	<script src="js/d3.v2.js" type="text/javascript"></script>
	<script src="js/charts.js" type="text/javascript"></script>
	<link rel="stylesheet" href="css/charts.css" type="text/css" />
</head>

<body>

<div id="example"></div>
<div id="example2"></div>
<div id="example3"></div>


<script type="text/javascript">
data = [ { 
'name': 'year',
'fields': ["sales"],
'data': [
			{
			'id': '1998',
			'fields': {'sales': 2300}
			},
			{
			'id': '1999',
			'fields': {'sales': 2400}
			},
			{
			'id': '2000',
			'fields': {'sales': 2350}
			},
			{
			'id': '2001',
			'fields': {'sales': 2630}
			},
			{
			'id': '2002',
			'fields': {'sales': 2240}
			},
			{'id': '2003',
			'fields': {'sales': 1300}
			},
			{'id': '2004',
			'fields': {'sales': 3300}
			},
			{'id': '2005',
			'fields': {'sales': 2353}
			},
			{
			'id': '2006',
			'fields': {'sales': 2827}
			},
			{
			'id': '2007',
			'fields': {'sales': 3827}
			},
			{
			'id': '2008',
			'fields': {'sales': 4827}
			}
		]
	} 
]

data2 = [ { 
'name': 'price',
'fields': ["fps", "price"],
'data': [
			{
			'id': 'Geforce 660',
			'fields': {'fps': 55.13,
						'price': 200
						}
			},
			{
			'id': 'Geforce 660ti',
			'fields': {'fps': 60.34,
						'price': 300
						}
			},
			{
			'id': 'Geforce670',
			'fields': {'fps': 72.76,
						'price': 400
						}
			},
			{
			'id': 'Geforce680',
			'fields': {'fps': 93.0,
						'price': 500
						}
			},
			{
			'id': 'Geforce690',
			'fields': {'fps': 123.57,
						'price': 650
						}
			}
			
		]
	} 
]

var chart = LineChart();

d3.select("#example")
      .datum(data)
      .call(chart);
      
var chart = BarChart();

d3.select("#example2")
      .datum(data)
      .call(chart);
      
var chart = ScatterPlot();

d3.select("#example3")
      .datum(data2)
      .call(chart);
</script>


</body>
</html>